<!DOCTYPE html>
<html>
    
<head>
    <meta charset="utf-8">
    
    <title>10+个很酷的Vue.js组件，模板和demo示例 | ApocalypseBlog</title>
    <canvas id="header_canvas"style="position:absolute;bottom:0"></canvas> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    

    

    

    

    
<link rel="stylesheet" href="/dist/build.css?v=1.14.0.css">

    <script src="/javascripts/bubble.js"></script>
    <script>
        window.isPost = true
        window.aomori = {
            
            
        }
        window.aomori_logo_typed_animated = false
        window.aomori_search_algolia = false

    </script>
<script>
    ((window.gitter = {}).chat = {}).options = {
      room: 'ApocalypseBlog/Apocalypse'
    };
  </script>
  <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
<meta name="generator" content="Hexo 5.3.0"></head>
<!--DaoVoice服务http://blog.daovoice.io/-->

    <script>(function (i, s, o, g, r, a, m) {
        i['DaoVoiceObject'] = r;
        i[r] = i[r] ||
          function () {
            (i[r].q = i[r].q || []).push(arguments);
          };
        i[r].l = 1 * new Date();
        a = s.createElement(o);
        m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        a.charset = 'utf-8';
        m.parentNode.insertBefore(a, m);
      })(window, document, 'script', ('https:' === document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/b00f5052.js", 'daovoice');
      daovoice('init', {
        app_id: "b00f5052",
      });
      daovoice('update');
    </script>
  
<body>

    <div class="container">
    <header class="header">
        <div class="header-type">
            
            <div class="header-type-inner">
                
                    <a class="header-type-title" href="/">ApocalypseBlog</a>
                
    
                
            </div>
        </div>
        <div class="header-menu">
            <div class="header-menu-inner">
                
            </div>
            <div class="header-menu-social">
                
            </div>
        </div>

        <div class="header-menu-mobile">
            <div class="header-menu-mobile-inner" id="mobile-menu-open">
                <i class="icon icon-menu"></i>
            </div>
        </div>
    </header>

    <div class="header-menu-mobile-menu">
        <div class="header-menu-mobile-menu-bg"></div>
        <div class="header-menu-mobile-menu-wrap">
            <div class="header-menu-mobile-menu-inner">
                <div class="header-menu-mobile-menu-close" id="mobile-menu-close">
                    <i class="icon icon-cross"></i>
                </div>
                <div class="header-menu-mobile-menu-list">
                    
                </div>
            </div>
        </div>
    </div>

</div>

    <div class="container">
        <div class="main">
            <section class="inner">
                <section class="inner-main">
                    <div class="post">
    <article id="post-ckk6o6au300007kny1cc56ngz" class="article article-type-post" itemscope
    itemprop="blogPost">

    <div class="article-inner">

        
          
        
        
        

        
        <header class="article-header">
            
  
    <h1 class="article-title" itemprop="name">
      10+个很酷的Vue.js组件，模板和demo示例
    </h1>
  

        </header>
        

        <div class="article-more-info article-more-info-post hairline">

            <div class="article-date">
  <time datetime="2020-06-11T22:12:47.000Z" itemprop="datePublished">2020-06-12</time>
</div>

            

            

            

        </div>

        <div class="article-entry post-inner-html hairline" itemprop="articleBody">
            <p>众所周知，<strong>Vue.js</strong> 组件是Vue创建自定义元素的重要功能之一，同时，模板可帮助你避免从头开始创建网页设计。总之，这些工具对于希望其开发过程更快，更高效的任何Web开发人员都是必不可少的。</p>
<a id="more"></a>

<p>此外，在过去的几年中，Vue.js 变得非常流行，许多企业将其添加到他们的技术栈中。该框架的优点是它具有内置的数据绑定和MVC模型（模型、视图、控制器），与<strong>Angular.js</strong>和<strong>React.js</strong>相比，它使配置更加容易。另外，Vue.js的学习曲线很小，与 Angular.js 相比，Vue更易于学习，理解和使用。</p>
<p>知道了这一点，我们收集了一份Vue.js组件、模板和实验清单，如果你是一个初学者，可以帮助你对这个框架的意义有一个概念，如果你是一个Vue.js开发者，也可以为你的下一个项目找到一些灵感。</p>
<hr>
<h2 id="BootstrapVue-Argon-Dashboard-PRO"><a href="#BootstrapVue-Argon-Dashboard-PRO" class="headerlink" title="BootstrapVue Argon Dashboard PRO"></a>BootstrapVue Argon Dashboard PRO</h2><p><strong><a target="_blank" rel="noopener" href="https://demos.creative-tim.com/bootstrap-vue-argon-dashboard-pro">BootstrapVue Argon Dashboard PRO</a></strong> 是BootstrapVue和Vue.js的高级仪表板。这是一种全新产品，它基于我们从头开始重新构建的最新框架结构，这种结构旨在使产品更直观，更具适应性，并且更易于定制。让Argon以其酷炫的功能给你带来惊喜，让你的项目达到一个全新的水平。</p>
<p><img src="http://user-gold-cdn.xitu.io/2020/6/8/172944e597c2e7a8?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="http://demos.creative-tim.com/bootstrap-vue-argon-dashboard-pro"></p>
<h2 id="Vue-White-Dashboard"><a href="#Vue-White-Dashboard" class="headerlink" title="Vue White Dashboard"></a>Vue White Dashboard</h2><p><a target="_blank" rel="noopener" href="https://demos.creative-tim.com/vue-white-dashboard"><strong>Vue White Dashboard</strong> </a>是一个免费的开源Bootstrap 4和Vue.js Admin仪表板，其中包含大量的组件，这些组件可以组合在一起并看起来非常漂亮。Vue White仪表板具有16个以上的独立组件，可让你自由选择和组合。所有组件的颜色都可以不同，你可以使用Sass文件轻松进行修改。</p>
<p><img src="http://user-gold-cdn.xitu.io/2020/6/8/172944e597b7ccc7?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="http://demos.creative-tim.com/vue-white-dashboard"></p>
<h2 id="Vue-QRcode-Reader"><a href="#Vue-QRcode-Reader" class="headerlink" title="Vue QRcode Reader"></a>Vue QRcode Reader</h2><p><a target="_blank" href="https://gruhn.github.io/vue-qrcode-reader?rel=nofollow"><strong>Vue QRcode Reader</strong></a>是一组用于检测和解码QR(二维码)码的Vue.js组件。它使你无需离开浏览器即可检测和解码QR码，所有组件都具有响应能力。除此之外，它接近零样式，因此你可以使它们适合你的布局。使用方法简单明了。</p>
<p><img src="http://user-gold-cdn.xitu.io/2020/6/8/172944e59a3db85f?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="http://gruhn.github.io/vue-qrcode-reader"></p>
<h2 id="VueJS-Expo"><a href="#VueJS-Expo" class="headerlink" title="VueJS Expo"></a>VueJS Expo</h2><p><a target="_blank" rel="noopener" href="https://vuejsexpo.com/"><strong>VueJS Expo</strong></a>是使用Vue.js框架收集的漂亮的网站，应用程序和实验。如果你是Vue.js框架的粉丝，那么这里可能是你获得灵感的地方。展示包括基于VueJS的主题，元素，仪表板等。</p>
<p><img src="http://user-gold-cdn.xitu.io/2020/6/8/172944e59a7bae7d?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="http://vuejsexpo.com"></p>
<h2 id="Vue-Paper-Dashboard-PRO"><a href="#Vue-Paper-Dashboard-PRO" class="headerlink" title="Vue Paper Dashboard PRO"></a>Vue Paper Dashboard PRO</h2><p><strong><a target="_blank" rel="noopener" href="https://demos.creative-tim.com/bs3/vue-paper-dashboard-pro/#/admin/overview">Vue Paper Dashboard PRO</a></strong> 是一个基于Bootstrap和Vue构建的漂亮资源，它将帮助你在短时间内开始开发仪表盘。Vue Paper Dashboard Pro是<a target="_blank" rel="noopener" href="https://www.creative-tim.com/product/paper-dashboard-pro?ref=devto">Original Paper Dashboard Pro</a>的VueJS移植版本。使用仪表板非常简单，但是需要具备Javascript，Vue和Vue-Router的基础知识。</p>
<p><img src="http://user-gold-cdn.xitu.io/2020/6/8/172944e59c10157c?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="http://demos.creative-tim.com/bs3/vue-paper-dashboard-pro/#/admin/overview"></p>
<h2 id="Koel"><a href="#Koel" class="headerlink" title="Koel"></a>Koel</h2><p><a target="_blank" href="https://koel.dev/?rel=nofollow"><strong>Koel</strong></a>是一种简单的基于Web的个人音频流服务，在客户端用Vue编写，在服务器端用Laravel编写。针对Web开发人员，Koel采用了一些更现代的Web技术——CSS grid，音频和拖放API等来完成其工作。</p>
<p><img src="http://user-gold-cdn.xitu.io/2020/6/8/172944e59da7e067?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="http://koel.dev/"></p>
<h2 id="Vue-Argon-Dashboard"><a href="#Vue-Argon-Dashboard" class="headerlink" title="Vue Argon Dashboard"></a>Vue Argon Dashboard</h2><p><a target="_blank" rel="noopener" href="https://demos.creative-tim.com/vue-argon-dashboard"><strong>Vue Argon Dashboard</strong></a>是Bootstrap 4和Vue.js的仪表板。它是开源的，免费的，并且具有许多组件，可以帮助你创建出色的网站。Vue Argon仪表板内置了100多个单独的组件，因此你可以选择和组合，因为实现了所有元素，所以从原型化到全功能代码将节省大量时间。该仪表板附带了预先构建的示例，因此开发过程是无缝的，从我们的页面切换到真实的网站非常容易。</p>
<p><img src="http://user-gold-cdn.xitu.io/2020/6/8/172944e5c28b45c4?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="http://demos.creative-tim.com/vue-argon-dashboard"></p>
<h2 id="Pagekit"><a href="#Pagekit" class="headerlink" title="Pagekit"></a>Pagekit</h2><p><a target="_blank" href="https://pagekit.com/?rel=nofollow"><strong>Pagekit</strong></a>是使用Symfony组件和VueJS构建的模块化，轻量级CMS。无论是个人博客还是你公司的网站，都可以使用Pagekit来为网络创建功能强大的内容，使其在每台设备上都能完美运行。它具有干净直观的界面，它也有一个很棒的内置市场。</p>
<p><img src="http://user-gold-cdn.xitu.io/2020/6/8/172944e5c3ac5bd2?imageslim" alt="http://pagekit.com/"></p>
<h2 id="Vue-Material-Dashboard-PRO"><a href="#Vue-Material-Dashboard-PRO" class="headerlink" title="Vue Material Dashboard PRO"></a>Vue Material Dashboard PRO</h2><p><a target="_blank" rel="noopener" href="https://demos.creative-tim.com/vue-material-dashboard-pro"><strong>Vue Material Dashboard PRO</strong></a>是一个出色的高级管理模板，建立在Vue Material和VueJS之上。它是通过考虑你在仪表板中实际需要的东西而创建的。Vue Material Dashboard PRO包含精选和优化的VueJS插件，一切都旨在相互配合。使用仪表板非常简单，但是需要具备Javascript，VueJS和Vue Router的基础知识。</p>
<p><img src="http://user-gold-cdn.xitu.io/2020/6/8/172944e5c80134f7?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="http://demos.creative-tim.com/vue-material-dashboard-pro"></p>
<h2 id="Vue-Color"><a href="#Vue-Color" class="headerlink" title="Vue-Color"></a>Vue-Color</h2><p><a target="_blank" href="http://vue-color.surge.sh/?rel=nofollow"><strong>Vue-Color</strong></a>是一款来自Sketch、Photoshop、Chrome、Github、Twitter、Material Design等的酷炫的采色器。</p>
<p><img src="http://user-gold-cdn.xitu.io/2020/6/8/172944e5e1f3ae5c?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="http://vue-color.surge.sh"></p>
<h2 id="Vue-Material-Kit"><a href="#Vue-Material-Kit" class="headerlink" title="Vue Material Kit"></a>Vue Material Kit</h2><p><strong><a target="_blank" rel="noopener" href="https://demos.creative-tim.com/vue-material-kit">Vue Material Kit</a></strong> 是基于Vue Material和VueJS构建的令人惊叹的免费开源资源。它将帮助你立即开始开发UI工具包。Vue Material Kit是原始<a target="_blank" rel="noopener" href="https://www.creative-tim.com/product/material-kit">Material Kit</a>的官方VueJS版本。使用UI Kit非常简单，但是需要Javascript，VueJS和Vue Router的基础知识。</p>
<p><img src="http://user-gold-cdn.xitu.io/2020/6/8/172944e5ee23af35?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="http://demos.creative-tim.com/vue-material-kit"></p>
<h2 id="Retrospectify"><a href="#Retrospectify" class="headerlink" title="Retrospectify"></a>Retrospectify</h2><p><strong><a target="_blank" href="http://pepf.nl/retrospective/?rel=nofollow">Retrospectify</a></strong> 是一个用 Vue 编写的很棒的工具，用于以数字方式进行敏捷团队回顾。当与远程团队进行回顾时，或者当您希望随时间跟踪回顾结果时，这将很有用。它有三种类型的笔记，你可以移动笔记或添加点到个别的笔记。</p>
<p><img src="http://user-gold-cdn.xitu.io/2020/6/8/172944e60a7f9562?imageslim" alt="http://pepf.nl/retrospective"></p>
<h2 id="Code-Notes"><a href="#Code-Notes" class="headerlink" title="Code Notes"></a>Code Notes</h2><p><strong><a target="_blank" href="https://lauthieb.github.io/code-notes/?rel=nofollow">Code Notes</a></strong> 是使用Electron＆Vue.js构建的开发人员的简单代码段管理器。使用它，你可以将多个片段保存在一个便笺中，按名称/语言/标签进行搜索，还可以管理Github要点。</p>
<p><img src="http://user-gold-cdn.xitu.io/2020/6/8/172944e610d83a53?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="http://lauthieb.github.io/code-notes"></p>
<p><strong>希望这份清单对您的下一个开发项目有帮助 🙂</strong></p>

        </div>

    </div>

    

    

    

    

    

    
<nav class="article-nav">
  
    <a href="/2020/06/12/Android%2011%20Beta%20%E7%89%88%E6%AD%A3%E5%BC%8F%E5%8F%91%E5%B8%83%EF%BC%81%E4%BB%A5%E5%8F%8A%E4%BC%97%E5%A4%9A%E9%9D%A2%E5%90%91%E5%BC%80%E5%8F%91%E8%80%85%E7%9A%84%E9%87%8D%E7%A3%85%E6%9B%B4%E6%96%B0/" id="article-nav-newer" class="article-nav-link-wrap">
      <div class="article-nav-caption">下一篇</div>
      <div class="article-nav-title">
        
          Android 11 Beta 版正式发布！以及众多面向开发者的重磅更新
        
      </div>
    </a>
  
  
    <a href="/2020/06/12/TypeScript%E6%B3%9B%E5%9E%8B%E5%8F%8A%E5%BA%94%E7%94%A8/" id="article-nav-older" class="article-nav-link-wrap">
      <div class="article-nav-caption">上一篇</div>
      <div class="article-nav-title">TypeScript泛型及应用</div>
    </a>
  
</nav>


    <section class="share">
        <div class="share-title">分享</div>
        <a class="share-item" target="_blank"
            href="https://twitter.com/share?text=10+个很酷的Vue.js组件，模板和demo示例 - ApocalypseBlog&url=http://example.com/2020/06/12/10-%E4%B8%AA%E5%BE%88%E9%85%B7%E7%9A%84Vue-js%E7%BB%84%E4%BB%B6%EF%BC%8C%E6%A8%A1%E6%9D%BF%E5%92%8Cdemo%E7%A4%BA%E4%BE%8B/">
            <box-icon type='logo' name='twitter'></box-icon>
        </a>
        <a class="share-item" target="_blank"
            href="https://www.facebook.com/sharer.php?title=10+个很酷的Vue.js组件，模板和demo示例 - ApocalypseBlog&u=http://example.com/2020/06/12/10-%E4%B8%AA%E5%BE%88%E9%85%B7%E7%9A%84Vue-js%E7%BB%84%E4%BB%B6%EF%BC%8C%E6%A8%A1%E6%9D%BF%E5%92%8Cdemo%E7%A4%BA%E4%BE%8B/">
            <box-icon name='facebook-square' type='logo' ></box-icon>
        </a>
        <!-- <a class="share-item" target="_blank"
            href="https://service.weibo.com/share/share.php?title=10+个很酷的Vue.js组件，模板和demo示例 - ApocalypseBlog&url=http://example.com/2020/06/12/10-%E4%B8%AA%E5%BE%88%E9%85%B7%E7%9A%84Vue-js%E7%BB%84%E4%BB%B6%EF%BC%8C%E6%A8%A1%E6%9D%BF%E5%92%8Cdemo%E7%A4%BA%E4%BE%8B/&pic=">
            <div class="n-icon n-icon-weibo"></div>
        </a> -->
    </section>

</article>









</div>
                </section>
            </section>

             
            <aside class="sidebar">
            
                
            </aside>
        </div>
    </div>

    <footer class="footer">
    <div class="footer-wave">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#3c4859" fill-opacity="1" d="M0,160L60,181.3C120,203,240,245,360,240C480,235,600,181,720,186.7C840,192,960,256,1080,261.3C1200,267,1320,213,1380,186.7L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>
    </div>

    <div class="footer-wrap">
        <div class="footer-inner"> 
            ApocalypseBlog &copy; 2021<br>
            Powered By Hexo · Theme By <a href="https://github.com/lh1me/hexo-theme-aomori" target="_blank">Aomori</a>
        </div>
    </div>

</footer>




<script src="/dist/build.js?1.14.0.js"></script>


<script src="/dist/custom.js?1.14.0.js"></script>









</body>

</html>